<template>
<div>
	<el-container class="orgContainer">
		<el-aside style="width:400px;padding-right: 15px;" class="orgAside">
			<el-form :inline="false" label-width="80px" size="mini" ref="form" :model="form" style="margin-top:15px">
				<el-row >
					<el-col :span="22">
					  <el-form-item label="需求状态:" :label-col="{ span: 5 }" :wrapper-col="{ span: 16  }">
						<el-select defaultValue="0" clearable="" v-model="query.body.status"  style="width: 100%"  >
						  <el-option v-for="item in dict('SMP0007')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
						</el-select>
					  </el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div style="margin-bottom: 15px;">
				<el-calendar v-model="cdate">
					<template slot="dateCell" slot-scope="{date,data}">
						<div style="text-align: center;" :class="data.isSelected ? 'is-selected' : ''" @click="timeChange(data.day)">
							{{data.day.split('-').slice(2).join('-')}}
						</div>
					</template>
				</el-calendar> 
			</div>
			
		</el-aside>
		<el-main style="border-left: 1px solid #EBEEF5;">
			<div class=" smp_panel_1" style="margin-top:-16px">
				<div class="smp_panel_header" >
					<div class="smp_panel_pre"></div>
					<div class="smp_panel_title">需求列表</div>
				</div>
				
			<div class="smp_panel_body">
				<el-table :data="calendarList" size="mini" stripe   style="width: 100%">
			
					<el-table-column prop="qmsNo" label="需求编号" width="120" align="center"></el-table-column>
					<el-table-column prop="qmsName" label="需求名称" show-overflow-tooltip  align="center"></el-table-column>
					
					<el-table-column prop="batchNum" label="批次号" align="center"  width="150" >
						<template slot-scope="scope">
							{{scope.row.batchNum|dictName("SMP0010")}}
						</template>
					</el-table-column>
					
					<el-table-column prop="status" label="需求状态" align="center"   width="150"  >
						<template slot-scope="scope">
							{{scope.row.status|dictName("SMP0007")}}
						</template>
					</el-table-column>
					
					<!-- <el-table-column prop="relase" label="测试版本" width="250" align="center"></el-table-column>
					<el-table-column prop="updateTime" label="处理时间" width="200" align="center"></el-table-column>
					<el-table-column prop="dealUser" label="处理人" width="200" align="center"></el-table-column>
					 -->
					 <el-table-column  label="操作"
					      align="center" width="150">
						<template slot-scope="scope">
						       <el-link 
						         size="mini"
								 type="primary"
								 :underline="false"
								 style="font-size: 12px;"
						         @click="handleEdit(scope.$index, scope.row)">详情</el-link>
						    
						     </template>  
					</el-table-column>
					 
				</el-table>
			<div class="smp-pagination" v-show="total>0">
				<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum" @current-change = "currentChange" @size-change="sizeChange"></el-pagination>
			</div> 
			</div> 
			</div>
			
			
		</el-main>
	</el-container>

</div>
</template>

<script>
	"use strict";
	import {getDemandCalendarDay} from '@/api/demand.js';
	
	export default {
		components: {
		},
		data() {
			return {
				total:0,
					calendarList: [], 
					query: {
						id:'',
						body:{
							updateTime:new Date(),
							status:'',
						},
						pageNum: 1,
						pageSize: 5
					},
					showVisible: false,
					record: {},
					cdate:new Date()
			};
		},
		created() {
			Object.assign(this.query,this.$route.query.yue);
			
			
			this.query.body.updateTime=this.cdate.getFullYear()+'-'+(this.cdate.getMonth()+1)+'-'+this.cdate.getDate()+' 00:00:00';
			this.getList()
		},
		methods: {
			
			
			rowClick(row){
				
					this.$router.push({path: '/main/requireManage/requirementList/requirementDetails',query:row})
				
			},
			
			
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
	
			onSubmit() {
				this.getList();
			},
	
			handleClick() {
				this.dialogVisible = true;
			},
			
			handleEdit(index,row){
				this.$router.push({path: '/main/requireManage/requirementList/requirementDetails',query:row})
				
			},
	
			reset() {
				this.query.body =   {
					}
			},
			
			getList() {
				getDemandCalendarDay(this.query).then(response => {
					this.calendarList = response.data.extend.list
					this.total = response.data.extend.total;
					
					let yue ={};
					Object.assign(yue,this.query);
					
					let day={};
					if(this.$route.query.day){
						Object.assign(day,this.$route.query.day);
					}
					
					if(this.$route.query.yue){
						this.$route.query.yue=yue;
					}else{
						this.$router.push({query:{activeName:'month',day:day,yue:yue}});
					}
					
					
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			currentChange(val){
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val){
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			},
			
			//月视图
			monthCalendar(){
				this.$router.push({name:'demandCalendar'})
			},
			
			//选中日期查出数据
			timeChange(val){
				// this.query.body.updateTime=val;
				this.query.body.updateTime=(val+' 00:00:00');
				this.getList();
			},

		}
	}
</script>

<style scoped>
	div ::v-deep th.gutter{
		display: initial;
	}
	
	div ::v-deep .el-calendar-day{
		min-height: 60px;
		height: inherit !important; 
		position: relative;
		z-index: inherit;
	} 
	
	.is-selected {
		color: #1989FA;
	}
	
	.el-row-two{
		margin-left: 10px;
		margin-top: 10px;
	}
	/* .test /deep/  .el-calendar-table  .el-calendar-day{
		width: 100px;
		height: 200px;
	} */
</style>
